<template>
    <view class="OrderNumber">
        <view class="OrderNumber-box">
            <view class="box-top">
                <text class="top-text">收</text>
                <text class="top-text1">收货信息</text>
            </view>
            <view class="box-center">
                <view class="center-left">
                    <text class="center-text">张大大 18888888888</text>
                    <text class="center-text1"
                        >四川省 成都市 高新区 华阳镇街道天府大道南段89号一栋二单元1204</text
                    >
                </view>
                <view class="center-right">
                    <text class="right-text">复制信息</text>
                </view>
            </view>
        </view>
        <view class="center-box">
            <view class="cbox-top">
                <text class="cbox-text">寄</text>
                <text class="cbox-text1">发货信息</text>
            </view>
            <view class="cbox-center">
                <view class="bottom-item">
                    <text class="bot-lrft">快递公司</text>
                    <u-input
                        class="bot-right"
                        border="none"
                        inputAlign="right"
                        placeholder="请输入"
                        fontSize="14"
                    ></u-input>
                </view>
                <view class="bottom-item">
                    <text class="bot-lrft">快递单号</text>
                    <u-input
                        class="bot-right"
                        border="none"
                        inputAlign="right"
                        placeholder="请输入"
                        fontSize="14"
                    ></u-input>
                </view>
                <view class="bottom-item1">
                    <view class="bot-lrft"
                        >添加图片<text class="text">(非必填，跟一张图片内)</text></view
                    >
                    <view class="bot-right">
                        <u-upload :maxCount="1" :fileList="[]"></u-upload>
                    </view>
                </view>
            </view>
        </view>
        <view class="bottom">
            <text class="bottom-text"> 如果填写错误，请联系平台客服 </text>
        </view>
        <view class="button">
            <view class="button-box"> 确定 </view>
        </view>
    </view>
</template>
<script>
export default {
    name: "OrderNumber",
    components: {},
    mixins: [],
    props: {},
    data() {
        return {
            fileList: [], //上传图片
        };
    },
    computed: {},
    watch: {},
    mounted() {},
    methods: {},
};
</script>
<style lang="scss" scoped>
.OrderNumber {
    height: 100vh;
    background-color: #f7f7f7;
    .OrderNumber-box {
        background-color: #fff;
        border-radius: 20rpx;
        margin: 25rpx;
        padding: 20rpx;
        .box-top {
            margin: 20rpx 0;
            .top-text {
                padding: 6rpx 8rpx;
                background-color: #df484b;
                border-radius: 50%;
                color: #fff;
                margin: 0 20rpx 0 0;
                font-size: 22rpx;
            }
            .top-text1 {
                color: #333;
                font-size: 30rpx;
            }
        }
        .box-center {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .center-left {
                .center-text {
                    font-weight: bold;
                    display: block;
                }
                .center-text1 {
                    font-size: 24rpx;
                    color: #999;
                    margin-top: 10rpx;
                }
            }
            .center-right {
                .right-text {
                    width: 100rpx;
                    color: #333;
                    margin-left: 20rpx;
                    display: block;
                    font-size: 24rpx;
                    border: 1px solid #999;
                    text-align: center;
                    padding: 10rpx 20rpx;
                    border-radius: 50rpx;
                }
            }
        }
    }
    .center-box {
        background-color: #fff;
        margin: 25rpx;
        padding: 20rpx;
        .cbox-top {
            .cbox-text {
                padding: 6rpx 8rpx;
                background-color: #1b90e6;
                border-radius: 50%;
                color: #fff;
                margin: 0 20rpx 0 0;
                font-size: 22rpx;
            }
            .cbox-text1 {
                color: #333;
                font-size: 30rpx;
            }
        }
        .cbox-center {
            margin: 20rpx 0;
            .bottom-item {
                margin: 35rpx 0;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .bot-lrft {
                    font-size: 28rpx;
                    color: #333;
                    .text {
                        color: #999;
                        font-size: 22rpx;
                    }
                }
                .bot-right {
                    font-size: 28rpx;
                    color: #999;
                }
            }
            .bottom-item1 {
                margin: 35rpx 0;
                .bot-lrft {
                    font-size: 28rpx;
                    color: #333;
                    margin: 20rpx 0;
                    .text {
                        color: #999;
                        font-size: 22rpx;
                        margin-left: 10rpx;
                    }
                }
                .bot-right {
                    font-size: 28rpx;
                    color: #999;
                }
            }
        }
    }
    .bottom {
        // position: fixed;
        // bottom: 180rpx;
        // left: 50%;
        // transform: translateX(-50%);
        color: #999;
        font-size: 24rpx;
        text-align: center;
    }
    .button {
        width: 90%;
        position: fixed;
        bottom: 40rpx;
        left: 50%;
        transform: translateX(-50%);
        // margin: 100rpx 20rpx 0;
        .button-box {
            background-color: #df4748;
            color: #fff;
            text-align: center;
            padding: 20rpx 0;
            border-radius: 50rpx;
        }
    }
}
</style>
